<template>
  <div class="doc">
    <div class="left">
    <div class="log">
        <img src="../assets/log.jpg" @click="imgClick" width="50px">
    </div>
      <h2>文档</h2>
      <ul>
        <li>
          <router-link to="/doc/install">安装</router-link>
        </li>
        <li>
          <router-link to="/doc/get-started">开始使用</router-link>
        </li>
      </ul>
      <h2>组件</h2>
      <ul>
        <li>
          <router-link to="/doc/button">Button 按钮</router-link>
        </li>
        <li>
          <router-link to="/doc/dialog">Dialog 对话框</router-link>
        </li>
         <li>
          <router-link to="/doc/input">Input 输入框</router-link>
        </li>
        <li>
          <router-link to="/doc/switch">Switch 开关</router-link>
        </li>
        <li>
          <router-link to="/doc/popover">Popover 弹出框</router-link>
        </li>
        <li>
          <router-link to="/doc/tabs">Tabs 选项卡</router-link>
        </li>
        <li>
          <router-link to="/doc/notice">Notice 消息框</router-link>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

export default {
 name: 'Doc',
 methods: {
   imgClick() {
     this.$router.push('/home')
   }
 }
}
</script>

<style  scoped>
   .doc {
     display: flex;
     position: fixed;
     left: 0;
     bottom: 0;
     top: 0;
     right: 0;
   }

   .main {
     height: 100vh;
     padding: 40px 20px;
     overflow-y:scroll;
     overflow-x:hidden;
   }
   .left{
     width: 150px;
     background-color: #002033;
     color: #fff;
     opacity: .9;
     padding-top: 10px;
   }
   .left::-webkit-scrollbar {
       display: none;
   }
   .left h2 {
     margin-top: 10px;
     padding-left: 16px;
     opacity: .9;
   }
   .left ul li {
     margin-top: 10px;
     height: 36px;
     line-height: 36px;
   }
   .left li:hover  {
     background: rgb(0,0,0,.4);

   }
     a{
     color: #fff;
     opacity: .9;
     display: block;
     width: 100%;
     padding-left: 16px;
     font-size: 15px;
   }

   .nav {
     height: 20px;
     padding: 10px;
   }
   .right {
     flex: 1;
   }
   img {
     margin-left: 16px;
     border-radius: 50%;
     cursor: pointer;
     margin-top: -10px;
   }
   .router-link-active {
      color: #ffd04b;
      opacity: .8;
    }
</style>
